<template>
  <div class="newCityContainer">
    <div
      class="dialog animated"
      :class="open? 'fadeIn':'fadeOut'"
      v-show="show"
      :style="{visibility: (visible?'visible':'hidden')}"
    >
      <div class="panel animated" :class="open? 'zoomIn':''">
        <div class="title">
          选择管辖城市
          <div class="close" @click="cancel()"></div>
        </div>
        <div style="padding:0 0.3rem;">
          <div v-if="areaSelectList.length != 0">
            <div class="launch_text" style="margin-bottom:0.08rem;">已选择{{areaSelectList.length}}个城市</div>
            <el-tag
              style="margin-top:0.12rem;"
              :key="tag.value"
              v-for="tag in areaSelectList"
              closable
              :disable-transitions="false"
              @close="handleClose(tag,true)"
            >{{tag.label}}</el-tag>
          </div>
          <div class="launch_text" style="margin-bottom:0rem;">选择城市</div>
          <el-select
            v-model="currentArea"
            placeholder="请选择省份"
            style="width:50%;margin-top:0.2rem;"
            @change="changeArea"
          >
            <el-option
              v-for="item in areaList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-checkbox v-model="isSelectAll" @change="allSelect">全选</el-checkbox>
          <el-checkbox-group v-model="checkAreaList">
            <el-checkbox
              style="margin-top:0.12rem;"
              v-for="item in cityList"
              @change="selectArea($event,item)"
              :key="item.value"
              :label="item.value"
            >{{item.label}}</el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="btn_div">
          <div class="btn_sure" @click="sure()">确 认</div>
          <div class="btn_cancel" @click="cancel()">取 消</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var vm;
export default {
  data: function() {
    return {
      show: false,
      open: false,
      visible: false,
      isAdd: false,
      title: "",
      currentArea: "",
      cityList: [],
      isSelectAll: false,
      areaSelectList: [],
      areaList: [],
      checkAreaList: []
    };
  },
  methods: {
    init: function(data) {
      vm.show = true;
      setTimeout(function() {
        vm.open = true;
        vm.visible = true;
      }, 11);
      vm.areaSelectList = data.data;
      vm.initData();
    },
    /**省份变化 */
    changeArea(val) {
      vm.getCityList(val);
    },
    /**获取城市列表 */
    getCityList(val) {
      api.listSubRegions({ parentValue: val }).then(function(data) {
        if (data.resultCode == 2000) {
          vm.cityList = data.list;
          vm.isSelectAll = true;
          vm.cityList.forEach(item => {
            if (!vm.checkAreaList.includes(item.value)) {
              vm.checkAreaList.push(item.value);
              vm.areaSelectList.push(item);
            }
          });
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    /**全选 */
    allSelect(value) {
      if (value) {
        for (let i = 0; i < vm.cityList.length; i++) {
          if (!vm.checkAreaList.includes(vm.cityList[i].value)) {
            vm.checkAreaList.push(vm.cityList[i].value);
            vm.areaSelectList.push(vm.cityList[i]);
          }
        }
      } else {
        for (let i = 0; i < vm.cityList.length; i++) {
          if (vm.checkAreaList.includes(vm.cityList[i].value)) {
            vm.handleClose(vm.cityList[i], false);
          }
        }
      }
    },
    /**选择城市 */
    selectArea(value, item) {
      console.log(item);
      if (value) {
        vm.areaSelectList.push(item);
        vm.hasShowAllSelect();
      } else {
        vm.isSelectAll = false;
        let index = vm.areaSelectList.indexOf(item);
        vm.areaSelectList.splice(index, 1);
      }
    },
    /**判断是否高亮全选按钮 */
    hasShowAllSelect() {
      for (let i = 0; i < vm.cityList.length; i++) {
        if (!vm.checkAreaList.includes(vm.cityList[i].value)) {
          vm.isSelectAll = false;
          return;
        }
        if (i == vm.cityList.length - 1) {
          vm.isSelectAll = true;
        }
      }
    },
    /**删除已选城市 */
    handleClose(deleteItem, isHasCheck) {
      let index1 = vm.areaSelectList.indexOf(deleteItem);
      let index2 = vm.checkAreaList.indexOf(deleteItem.value);
      vm.checkAreaList.splice(index2, 1);
      vm.areaSelectList.splice(index1, 1);
      if (isHasCheck) {
        vm.hasShowAllSelect();
      }
    },
    initData() {
      api.listRegionsOfLevel({ regionLevel: 1 }).then(function(data) {
        if (data.resultCode == 2000) {
          vm.areaList = data.list;
          vm.currentArea = vm.areaList[0].value;
          for (let i = 0; i < vm.areaSelectList.length; i++) {
            vm.checkAreaList.push(vm.areaSelectList[i].value);
          }
          vm.getCityList(vm.currentArea);
        } else {
          vm.$message.error(data.message);
        }
      });
    },

    sure: function() {
      vm.$emit("callback", vm.areaSelectList);
      vm.cancel();
    },
    cancel: function() {
      //隐藏弹窗
      vm.open = false;
      setTimeout(function() {
        vm.show = false;
        vm.visible = false;
        vm.areaSelectList = [];
        vm.areaList = [];
        vm.checkAreaList = [];
        vm.cityList = [];
      }, 500);
    }
  },
  created: function() {
    vm = this;
  }
};
</script>
<style lang="scss">
.newCityContainer {
  .line_from {
    height: 1px;
    margin: 0.24rem 0.18rem 0.18rem 0.18rem;
    background-color: #f3f6fc;
  }
  .el-form--inline .el-form-item {
    vertical-align: inherit;
  }
  .search_input {
    width: 40%;
    font-size: 0.16rem;
    margin-top: 0.1rem;
  }
  .el-checkbox__label {
    font-size: 0.16rem;
  }
  .checkGroup {
    padding: 0.2rem;
  }
  .el-input__inner {
    border-radius: 0.08rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }
  .el-input__icon {
    line-height: 0.36rem;
  }
  .el-checkbox__inner {
    width: 0.18rem;
    height: 0.18rem;
  }
  .el-checkbox__inner::after {
    height: 0.09rem;
    left: 0.06rem;
    position: absolute;
    top: 0.02rem;
  }
  .el-checkbox {
    margin-top: 0.05rem;
  }

  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }
  .launch_text {
    color: #999999;
    text-align: left;
    font-size: 0.16rem;
    margin: 0.2rem 0;
  }
  .el-input__icon {
    line-height: 0.36rem;
  }
  .el-input-group__append,
  .el-input-group__prepend {
    background-color: #ffffff;
    color: #666666;
    border: 0rem solid #ffffff;
    font-size: 0.16rem;
    padding: 0 0.1rem;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .el-radio {
    margin-right: 0.1rem;
  }
  .el-form-item__label {
    font-size: 0.16rem;
    color: #666666;
  }
  .el-radio.is-bordered + .el-radio.is-bordered {
    margin-left: 0rem;
  }
  .el-tag {
    font-size: 0.16rem;
  }
  .el-button--small {
    font-size: 0.16rem;
  }

  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }
}
</style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped>
.panel {
  width: 8rem;
}
</style>

